<!--
 * @Author: zjj
 * @Date: 2020-02-21 10:25:34
 * @LastEditors: zjj
 * @LastEditTime: 2020-02-24 13:29:15
 -->
<!--  -->
<template>
  <div class="home">
    <div class="title-bg"></div>
    <div class="map-bg">
      <router-link tag="span" :to="{path:'/module/z-g-z'}"  class="zg">诸葛镇</router-link>
      <router-link tag="span" :to="{path:'/module/h-d-z'}" class="hdz">黄店镇</router-link>
      <router-link tag="span" :to="{path:'/company_list'}" class="npjd">女埠街道</router-link>
      <router-link tag="span" :to="{path:'/company_list'}" class="xxz">香溪镇</router-link>
      <router-link tag="span" :to="{path:'/company_list'}" class="dsx">柏社乡</router-link>
      <router-link tag="span" :to="{path:'/company_list'}" class="mjz">梅江镇</router-link>
      <router-link tag="span" :to="{path:'/company_list'}" class="hxz">横溪镇</router-link>
      <router-link tag="span" :to="{path:'/company_list'}" class="mjianz">马涧镇</router-link>
      <router-link tag="span" :to="{path:'/company_list'}" class="stsz">水亭畲族</router-link>
      <router-link tag="span" :to="{path:'/company_list'}" class="ycjd">永昌街道</router-link>
      <router-link tag="span" :to="{path:'/company_list'}" class="cxjd">赤溪街道</router-link>
      <router-link tag="span" :to="{path:'/company_list'}" class="ljjd">兰江街道</router-link>
      <router-link tag="span" :to="{path:'/company_list'}" class="ysjd">云山街道</router-link>
      <router-link tag="span" :to="{path:'/module/l-d-x'}" class="ldx">灵洞乡</router-link>
      <router-link tag="span" :to="{path:'/company_list'}" class="ybz">游埠镇</router-link>
      <router-link tag="span" :to="{path:'/company_list'}" class="shjd">上华街道</router-link>
      <div class="area">
        <router-link tag="div" :to="{path:'/module/f-z'}" class="area-item">
          <span :class="[c_visited('/module/f-z')]">时尚纺织</span>
          <span :class="['rect',c_visited_bg('/module/f-z')]"></span>
        </router-link>
        <router-link tag="div" :to="{path:'/module/g-d'}" class="area-item">
          <span :class="[c_visited('/module/g-d')]">光电产业</span>
          <span :class="['rect',c_visited_bg('/module/g-d')]"></span>
        </router-link>
        <router-link tag="div" :to="{path:'/module/x-n-y'}" class="area-item">
          <span :class="[c_visited('/module/x-n-y')]">能源汽配</span>
          <span :class="['rect',c_visited_bg('/module/x-n-y')]"></span>
        </router-link>
        <router-link tag="div" :to="{path:'/module/s-w'}" class="area-item">
          <span :class="[c_visited('/module/s-w')]">生物医药</span>
          <span :class="['rect',c_visited_bg('/module/s-w')]"></span>
        </router-link>
        <router-link tag="div" :to="{path:'/module/j-z'}" class="area-item">
          <span :class="[c_visited('/module/j-z')]">建筑产业</span>
          <span :class="['rect',c_visited_bg('/module/j-z')]"></span>
        </router-link>
        <router-link tag="div" :to="{path:'/module/q-t-c-y'}" class="area-item">
          <span :class="[c_visited('/module/q-t-c-y')]">其他产业</span>
          <span :class="['rect',c_visited_bg('/module/q-t-c-y')]"></span>
        </router-link>
      </div>
    </div>
    <div class="company-title"></div>
    <swiper :options="swiperOption" class="swiper">
      <swiper-slide v-for="(slide, index) in swiperSlides" :key="index">
        <div class="swiper-item">
          <img class="img" :src="slide">
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
import HM from "../../assets/imgs/hm.png";
import { xlzq, _xlzq } from "../../api/api";
export default {
  components: {},
  data() {
    return {
      shareInfo: {},
      swiperOption: {
        pagination: {
          el: ".swiper-pagination"
        }
      },
      swiperSlides: [HM]
    };
  },
  computed: {},
  watch: {},
  methods: {
    _shareConfig(jsk) {
      let that = this;
      wx.config(jsk);
      wx.ready(() => {
        console.log("ready", this.shareInfo);
        wx.updateTimelineShareData({
          title: this.shareInfo.title, // 分享标题
          link: window.location.origin + window.location.pathname, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: that.shareInfo.img||"https://cdn.weile999.com/ygp_v2/logo/logo.png", // 分享图标
          success: function(res) {
            // 设置成功
            console.log("success", res);
          },
          fail:function(res){
            console.log("fail",res)
          }
        });
        wx.updateAppMessageShareData({
          title: this.shareInfo.title, // 分享标题
          link: window.location.origin + window.location.pathname, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          desc: that.shareInfo.desc || "兰溪官方特色购物平台。", // 分享描述
          imgUrl: that.shareInfo.img||"https://cdn.weile999.com/ygp_v2/logo/logo.png", // 分享图标
          success: function(res) {
            // 设置成功
            console.log("success", res);
          },
          fail:function(res){
            console.log("fail",res)
          }
        });
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
      });
      wx.error(res => {
        console.log("error", res);
        // _xlzq({ url: "https://web.local.weile999.com/index/home" }).then(
        //   ({ data: { result } }) => {
        //     this.shareInfo = result;
        //     if (typeof wx != "undefined") {
        //       this._shareConfig(result.jsk);
        //     }
        //   }
        // );
      });
    },
    c_visited(value) {
      return this.$store.state.routes.includes(value) ? "visited-color" : "";
    },
    c_visited_bg(value) {
      return this.$store.state.routes.includes(value) ? "visited-bg" : "";
    }
  },
  created() {},
  mounted() {
    xlzq().then(({ data: { result } }) => {
      this.shareInfo = result;
      if (typeof wx != "undefined") {
        this._shareConfig(result.jsk);
      }
    });
  },
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
.home {
  height: 100%;
  background: url("../../assets/imgs/bg.png");
  background-size: 100% 100%;
  overflow-y: auto;
  .title-bg {
    height: 161px;
    background: url("../../assets/imgs/title-bg.png");
    background-size: 100% 100%;
  }
  .map-bg {
    position: relative;
    margin-left: 9px;
    height: 228px;
    font-size: 9px;
    line-height: 10px;
    color: #fff;
    background: url("../../assets/imgs/map-bg.png");
    background-size: 100% 100%;
    .zg {
      position: absolute;
      left: 30px;
      top: 114px;
      width: 9px;
      padding: 0 10px;
    }
    .hdz {
      position: absolute;
      left: 58px;
      top: 30px;
      width: 9px;
      padding: 15px 25px;
    }
    .npjd {
      position: absolute;
      left: 116px;
      top: 60px;
      width: 9px;
      padding: 10px;
    }
    .xxz {
      position: absolute;
      left: 156px;
      top: 60px;
      width: 9px;
      padding: 10px;
    }
    .dsx {
      position: absolute;
      left: 211px;
      top: 22px;
      padding: 20px 15px;
    }
    .mjz {
      position: absolute;
      left: 270px;
      top: 43px;
      width: 9px;
      padding: 20px 10px;
    }
    .hxz {
      position: absolute;
      left: 306px;
      top: 31px;
      padding: 20px 10px;
    }
    .mjianz {
      position: absolute;
      left: 185px;
      top: 77px;
      padding: 20px 17px;
    }
    .stsz {
      position: absolute;
      left: 15px;
      top: 154px;
      width: 9px;
      padding: 0 5px;
      transform: rotate(-30deg);
    }
    .ycjd {
      position: absolute;
      left: 59px;
      top: 96px;
      width: 9px;
      padding: 10px 5px;
      transform: rotate(10deg);
    }
    .cxjd {
      position: absolute;
      left: 80px;
      top: 155px;
      width: 24px;
    }
    .ljjd {
      position: absolute;
      left: 102px;
      top: 109px;
      width: 9px;
      padding: 10px 4px;
      transform: rotate(-20deg);
    }
    .ysjd {
      position: absolute;
      left: 126px;
      top: 120px;
      padding: 5px 2px;
    }
    .ldx {
      position: absolute;
      left: 156px;
      top: 136px;
      width: 9px;
      padding: 10px;
    }
    .ybz {
      position: absolute;
      left: 38px;
      top: 185px;
      padding: 5px 10px;
    }
    .shjd {
      position: absolute;
      left: 126px;
      top: 156px;
      width: 9px;
      padding: 10px 5px;
    }
    .area {
      position: absolute;
      bottom: -20px;
      right: 18px;
      width: 150px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .area-item {
        display: flex;
        margin-bottom: 10px;
        font-size: 10px;
        color: #fff;
        align-items: center;
        .rect {
          margin-left: 8px;
          height: 8px;
          width: 8px;
          background: #fff;
        }
        .visited-color {
          color: #012f6b;
        }
        .visited-bg {
          background: #012f6b;
        }
      }
    }
  }
  .company-title {
    margin: 13px auto 0;
    width: 293px;
    height: 60px;
    background: url("../../assets/imgs/company-title.png");
    background-size: 100% 100%;
  }
  .swiper {
    height: 200px;
    .swiper-item {
      display: flex;
      justify-content: center;
      height: 100%;
      width: 100%;
      .img {
        height: 100%;
        width: 345px;
      }
    }
  }
}
</style>
